<template>
  <template v-for="routes in props.menus" :key="routes.path">
    <el-sub-menu
      :index="routes.name"
      v-if="Array.isArray(routes.children) && routes.children.length"
    >
      <template #title>
        <CEIcon :name="'iconfont ' + routes.meta?.icon" color="#fff" />
        <span class="menus_title">{{ routes.meta?.title }}</span>
      </template>
      <subMenusItem :menus="routes.children" @click="menuClick" />
    </el-sub-menu>
    <el-menu-item v-else :index="routes.name" @click="menuClick(routes)">
      <CEIcon :name="'iconfont ' + routes.meta?.icon" color="#fff" />
      <span class="menus_title">{{ routes.meta?.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
const props: any = defineProps({
  menus: {
    type: Array,
    default: () => []
  }
})
const emits = defineEmits({
  click: (data) => !!data
})

const menuClick = (route: any) => {
  emits('click', route)
}

defineOptions({
  name: 'subMenusItem'
})
</script>

<style scoped>
.menus_title {
  padding-left: 10px;
}
</style>
